<template>
	<div>
		<div class="top fixed w100 t0 z1 border-box">
			<div class="flex just-between box">
				<div>
					<img width="26" src="../assets/icon.jpg"/>
				</div>
				<div class="search">
					<van-icon class="search-icon" name="search" size="18"/>
					<span>请输入商品名称</span>
				</div>
				<div>
					<van-icon name="manager-o" size="24" />
				</div>
			</div>
			<div>
				<van-tabs background="none" line-width="30px" 
				title-active-color="#ff6700" color="#ff6700" @click="change">
					<van-tab title="推荐"></van-tab>
					<van-tab title="智能"></van-tab>
					<van-tab title="电视"></van-tab>
					<van-tab title="家电"></van-tab>
					<van-tab title="笔记本"></van-tab>
				</van-tabs>
			</div>
		</div>
		<div class="main">
			<div v-show="index==0">
				<!-- 轮播图 -->
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item>
						<img width="100%" src="./../assets/banner1.jpg" />
					</van-swipe-item>
					<van-swipe-item>
						<img width="100%" src="./../assets/banner2.jpg" />
					</van-swipe-item>
					<van-swipe-item>
						<img width="100%" src="./../assets/banner3.jpg" />
					</van-swipe-item>
				</van-swipe>
				<!-- 快捷通道 -->
				<van-grid square :column-num="5">
					<van-grid-item v-for="value in 10" :key="value" class="imgbox">
						<img width="150%" src="./../assets/1.webp" >
					</van-grid-item>
				</van-grid>
				<!-- 商品列表 -->
				<div  class="goods flex just-evenly flex-wrap">
					<router-link  v-for="item in phoneList" :key=item.id tag="div" :to="'/detail?id='+item._id">
						<img width="100%" :src="item.main_banner" />
						<p class="title">{{item.title}}</p>
						<p class="desc mt3 mb3">{{item.desc}}</p>
						<p class="price">
							<span class="fs12">￥</span>
							{{item.price}}
							<span class="fs12">起</span></p>
						<van-button color="rgb(234,98,91)" class="mt5 mb5">立即购买</van-button>
					</router-link>
				</div>
			</div>
			<div v-show="index==1">2</div>
			<div v-show="index==2">3</div>
			<div v-show="index==3">4</div>
			<div v-show="index==4">5</div>
		</div>
	
	</div>
</template>
<!-- 在首页请求后端数据 -->

<!-- 后端通过id在数据库中拿数据 -->
<!-- 前端在查看商品时，把id传递给后端 -->
<!-- 现在在列表界面，从列表进入详情界面 -->
<!-- 请求数据的代码应该写在详情界面 -->
<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				index:0,
				phoneList:[]
			}
		},
		methods:{
			change(index){
				this.index!==index&&(this.index=index)
			},
			getList(){
				axios.get('/api/list').then(data=>{
					this.phoneList=data.data.data
				})
			}
		},
		mounted() {
			//一进界面就执行
			this.getList()
		}
	}
</script>

<!-- <style>
	.goods .van-button{
		font-size: 13px;
		height: 34px;
	}
</style> -->
<style scoped>
	.top{
		background:#f2f2f2;
		padding: 3px 14px 0;
	}
	.search{
		background: #fff;
		height: 34px;
		line-height: 34px;
		flex: 1;
		margin: 0 15px;
		font-size: 16px;
		border: 1px solid #e5e5e5;
		color: rgba(0,0,0,.3);
	}
	.search-icon{
		margin: 0 8px;
	}
	.box>div{
		height: 34px;
		display: flex;
		align-items: center;
	}
	.imgbox{
		overflow: hidden;
	}
	/* 在设置宽度的时候,%的参考单位是父级元素 vw是屏幕宽度 */
	.goods>div{
		width: 49vw;
		text-align: center;
	}
	.title{
		color: rgba(0,0,0,.87);
		font-size: 15px;
		height: 20px;
		line-height: 20px;
	}
	.desc{
		color: rgba(0,0,0,.54);
		font-size: 12px;
	}
	.price{
		color: #ff6700;
		font-size: 15px;
	}
	.goods .van-button{
		font-size: 13px;
		height: 34px;
	}
	.main{
		padding-top: 80px;
		padding-bottom: 80px;
	}
</style>
